<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的留言</title>
<!-- jquery -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			url:'../showMsg',
			dataType:'json',
			type:'post',
			success:function(re){
				for(var i=0;i<re.length;i++){
					var msg=re[i];
					console.log(msg.floor);
					var boxDiv= $("<div name='box'></div>");
					boxDiv.attr("data-lid",msg.lid);
					var titleDiv=$("<div name='title'></div>");
					var contentDiv=$("<div name='content'></div>");
					contentDiv.text(msg.lcontent);
					var floorSpan=$("<span name='floor'></span>");
					floorSpan.text("第"+msg.floor+"楼");
					var unameSpan=$("<span data-uid='"+msg.uid+"' name='uname'></span>");
					unameSpan.text(msg.uname); 
					var pushTimeSpan=$("<span name='pushTime'></span>");
					pushTimeSpan.text(msg.pushTime);
					var stateSpan=$("<span name='state'></span>");
					if(msg.state==0){
						stateSpan.text("未读");
						stateSpan.css('color','red');
						stateSpan.css('cursor','pointer');
					}else{
						stateSpan.text("已读");
						stateSpan.css('color','green');
					}
					var a1=$("<a href='#reMsg' name='re' style='margin-left:750px;'>回复</a>");
					titleDiv.append(floorSpan);
					titleDiv.append(unameSpan);
					titleDiv.append(pushTimeSpan);
					titleDiv.append(stateSpan);
					boxDiv.append(titleDiv);
					boxDiv.append(contentDiv);
					boxDiv.append(a1);
					$("#msgContainer").append(boxDiv);
				}    
				$("a[name='re']").css('cursor','pointer');
				$("a[name='re']").click(function(){
					//获取被留言(被回复)者的ID
					var oid=$(this).parent().find("span[name='uname']").attr("data-uid");
					var curBox=$(this).parent();
					//获取留言的分组
					var lgroup=$(this).parent().attr("data-lid");
					//显示回复的div
					var reDiv=$("<textarea id='reMsg' name='reMsg' placeholder='回复:' rows='5' cols='114'></textarea>");
					curBox.append(reDiv);
					var rebtn=$("<a name='rebtn' class='btn btn-primary' style='margin-left:650px;'>确认回复</a>");
					curBox.append(rebtn);
					
					//确认回复留言
					$("a[name='rebtn']").click(function(){
						//获取留言的内容
						var lcontent=$("textarea[name='reMsg']").val();
						$.ajax({
							url:'<c:url value="/returnMsg" />',
							data:{"oid":oid,"lcontent":lcontent,"lgroup":lgroup},
							dataType:'json',
							type:'post',
							success:function(re){
								if(re.flag){
									alert("回复消息成功");
									location.href="<c:url value='/path/mymsg.jsp' />";
								}
							}
						})
					})
				})
				$("div[name='box']").each(function(){
					var curlid=$(this).attr("data-lid");
					$(this).show(function(){
						$.ajax({
							url:"<c:url value='/getReturnMsg' />",
							data:{"lgroup":curlid},
							dataType:'json',
							type:'post',
							success:function(re){
								for(var i=0;i<re.length;i++){
									var returnMsg=re[i];
									console.log(returnMsg);
									if(returnMsg.curUid==returnMsg.uid){
										var reTitleDiv=$("<div name='retitle'></div>");
										var reContentDiv=$("<div name='recontent'></div>");
										var reUnameSpan=$("<span name='reuname'></span>");
										var reTxtSpan=$("<span name='reTxt'>回复</span>");
										var reTimeSpan=$("<span name='reTime'></span>");
										reTimeSpan.text(returnMsg.pushtime);
										reUnameSpan.text("我");
										reContentDiv.text(returnMsg.lcontent);
										reTitleDiv.append(reUnameSpan);
										reTitleDiv.append(reTxtSpan);
										reTitleDiv.append(reTimeSpan);
										$("div[data-lid='"+curlid+"']").append(reTitleDiv);
										$("div[data-lid='"+curlid+"']").append(reContentDiv);
									}else{
										var reTitleDiv=$("<div name='retitle'></div>");
										var reContentDiv=$("<div name='recontent'></div>");
										var reUnameSpan=$("<span name='reuname'></span>");
										var reTxtSpan=$("<span name='reTxt'>回复</span>");
										var reTimeSpan=$("<span name='reTime'></span>");
										reTimeSpan.text(returnMsg.pushtime);
										reUnameSpan.text(returnMsg.uname);
										reContentDiv.text(returnMsg.lcontent);
										reTitleDiv.append(reUnameSpan);
										reTitleDiv.append(reTxtSpan);
										reTitleDiv.append(reTimeSpan);
										$("div[data-lid='"+curlid+"']").append(reTitleDiv);
										$("div[data-lid='"+curlid+"']").append(reContentDiv);
									}
									console.log(re[i]);
								}
							}
						})
					})
				})
			}
		})
		
	})
</script>

<style type="text/css">
	span[name='floor']{
		color:gray;
		display:inline-block;
		width:100px;
		height:20px;
		line-height:20px;
		font-size:16px;
	}
	span[name='uname']{
		width:100px;
		height:20px;
		line-height:20px;
		display:inline-block;
		font-size:16px;
		font-weight:bold;
	}
	span[name='pushTime']{
		width:200px;
		height:20px;
		line-height:20px;
		display:inline-block;
		color:gray;
	}
	span[name='state']{
		height:20px;
		line-height:20px;
		display:inline-block;
	}
	div[name='content']{
		width:800px;
		font-size:16px;
		min-height:100px;
		margin-top:20px;
		margin-bottom:10px;
		background:#ccddff;
		padding:15px 10px;
	}
	div[name='box']{
		margin-bottom:30px;
		border-top:2px dotted orange;
		border-bottom:2px dotted orange;
		background:#eeffbb;
		padding:25px 30px;
	}
	
	span[name='reuname']{
		width:80px;
		height:20px;
		line-height:20px;
		display:inline-block;
		font-size:14px;
		font-weight:bold;
	}
	span[name='reTime']{
		width:200px;
		height:20px;
		line-height:20px;
		display:inline-block;
		margin-left:20px;
		color:gray;
	}
	div[name='recontent']{
		width:800px;
		font-size:16px;
		min-height:50px;
		margin-top:20px;
		margin-bottom:10px;
		background:#ccddff;
		padding:15px 10px;
	}
</style>
</head>
<body>
 	<div class="container">
 		<div class="row">
 			<h3 class="text-primary" style="text-align:center;">我的留言</h3>
 		</div>
 		<div id="msgContainer" class="row">
 			
 		</div>
 	</div>
</body>
</html>